<template>
	<view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="list.length==0">
					<image src="../../static/noorder.png"></image>
					<view class="text">
						没有要发货的订单
					</view>
				</view>
				<view class="row" v-for="(row,index) in list" :key="index">
					<view class="type">订单号: {{row.order_info.number}}</view>
					<view class="order-info">
						<view class="left">
							<image :src="row.goods_snapshot.cover_info.url"></image>
						</view>
						<view class="right">
							<view class="name">
								{{row.goods_snapshot.name}}
							</view>
							<view class="price-number">
								订单状态：<view class="price">{{row.order_info.order_status_info.name}}</view>
							</view>
						</view>
						
					</view>
					<view class="detail">
						<view class="number">购买{{row.num}}件商品</view><view class="sum">合计￥<view class="price">{{row.num*row.goods_snapshot.price}}</view></view><view class="nominal"></view>
					</view>
					<view class="btns">
						<block>
							<view class="default" @click="showKefu(row.order_info.client_info.name, row.order_info.client_info.mobile)">联系买家</view>
							<view class="pay" @click="gofahuo(row.id)">发货</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!--操作-->
		<!--联系买家 弹出-->
		<view>
			<neil-modal :show="kefu" @close="closeKefu()" @confirm="goKefu()" title="联系买家">
				<view class="input-view">
					<view class="input-name">
						<view>昵称</view>
						<input type="text" placeholder="买家昵称" disabled :value="maijiaName"/>
					</view>
					<view class="input-password">
						<view>手机</view>
						<input type="text"  placeholder="买家手机号码" disabled :value="maijiaMobile"/>
					</view>
				</view>
			</neil-modal>
		</view>
		<!--发货操作-->
		<view>
			<neil-modal :show="fahuo" @close="closeKefu()" @confirm="goToRequest()" title="发货">
				<view class="input-view">
					<view style="text-align: center">
						<radio-group @change="radioChange">
							<label class="radio" style="margin-right: 4upx;"><radio value="快递配送" color="#fa436a" checked />快递配送</label>
							<label class="radio" style="margin-left: 4upx;"><radio value="送货上门" color="#fa436a"/>送货上门</label>
						</radio-group>
					</view>
					<view class="input-name" v-if="requestData.type==='快递配送'">
						<view>快递名称</view>
						<input type="text" placeholder="快递名称，如邮政快递"  v-model="requestData.name"/>
					</view>
					<view class="input-password" v-if="requestData.type==='快递配送'">
						<view>运单号</view>
						<input type="text"  placeholder="请输入运单号"  v-model="requestData.number"/>
					</view>

					<view class="input-name" v-if="requestData.type==='送货上门'">
						<view>配送人名</view>
						<input type="text" placeholder="请输入配送人姓名"  v-model="requestData.name"/>
					</view>
					<view class="input-password" v-if="requestData.type==='送货上门'">
						<view>联系方式</view>
						<input type="text"  placeholder="请输入配送人联系方式"  v-model="requestData.number"/>
					</view>
				</view>
			</neil-modal>
		</view>
	</view>
</template>
<script>
    import { order } from '../../common/config'
    import uniLoadMore from "@/components/uni-load-more"
    import neilModal from '@/components/neil-modal.vue';
	export default {
        components: {uniLoadMore,neilModal},
		data() {
			return {
                kefu:false,//联系买家弹出层
				maijiaName:'',
				maijiaMobile: '',
				fahuo:false,//发货操作
				requestData:{
                    id:0,
					type:'快递配送',
                  	number:'',
                    name:''
				},
				list:[],
			};
		},
		onShow(){
          // this.loadData();
		},
        created(){
            this.loadData();
		},
		methods: {
            //发货操作
            radioChange(e){
				this.requestData.type = e.detail.value;
			},
            gofahuo(id){
                this.requestData.id = id;
                this.fahuo = true;
			},
            async goToRequest() {
                if(this.requestData.id === 0) {
                    this.msg('要操作的订单不存在');
                    return;
                }
                if(this.requestData.number === '') {
                    this.msg('运单号或者配送人的联系方式为空！');
                    return;
				}
                if(this.requestData.name === '') {
                    this.msg('请输入快递公司或者配送人姓名！');
                    return;
                }
                await this.$api.MyRequest(order.PutShipOrder.url, order.PutShipOrder.method,this.requestData)
                    .then(res => {
                        uni.navigateTo({
                       	 	url:'/pages/order/order_ship'
						})
                    })
                    .catch(err => {
                    });
			},
            //联系买家
            showKefu(name,mobile){
                this.kefu= true;
                this.maijiaMobile = mobile;
                this.maijiaName = name;
            },
            closeKefu(){
                this.kefu = false;
                this.fahuo = false;
            },
            goKefu(){
                uni.makePhoneCall({
                    phoneNumber: this.maijiaMobile //仅为示例
                });
            },
            /**
             * 加载数据
             * @param tbIndex
             */
            async loadData() {
                await this.$api.MyRequest(order.GetShipOrder.url, order.GetShipOrder.method)
                    .then(res => {
						this.list = res;
                    })
                    .catch(err => {
                    });
            }
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f3f3f3;
}
.order-list{
	/*margin-top: 80upx;*/
	padding-top: 20upx;
	width: 100%;
	.list{
		width: 94%;
		margin: 0 auto;
		.onorder{
			width: 100%;
			height: 50vw;
			display: flex;
			justify-content: center;
			align-content: center;
			flex-wrap: wrap;
			image{
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
			.text{
				width: 100%;
				height: 60upx;
				font-size: 28upx;
				color: #444;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.row{
			/*width: calc(100% - 40upx);*/
			padding: 10upx 20upx;
			border-radius: 10upx;
			background-color: #fff;
			margin-bottom: 20upx;
			.type{
				font-size: 26upx;
				color: #ec652f;
				height: 50upx;
				display: flex;
				align-items: center;
			}
			.order-info{
				width: 100%;
				display: flex;
				.left{
					flex-shrink: 0;
					width: 25vw;
					height: 25vw;
					image{
						width: 25vw;
						height: 25vw;
						border-radius: 10upx;
					}
				}
				.right{
					width: 100%;
					margin-left: 10upx;
					position: relative;
					.name{
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.spec{
						color: #a7a7a7;
						font-size: 22upx;

					}
					.price-number{
						position: absolute;
						bottom: 0;
						width: 100%;
						display: flex;
						justify-content: flex-end;
						font-size: 22upx;
						color: #333;
						display: flex;
						align-items: flex-end;
						.price{
							font-size: 24upx;
							margin-right: 5upx;
						}

					}
				}
			}
			.detail{
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				height: 60upx;
				font-size: 26upx;
				.sum{
					padding: 0 8upx;
					display: flex;
					align-items: flex-end;
					.price{
						font-size: 30upx;
					}
				}
				
			}
			.btns{
				height: 80upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				view{
					min-width: 120upx;
					height: 50upx;
					padding: 0 20upx;
					border-radius: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28upx;
					margin-left: 20upx;
				}
				.default{
					border: solid 1upx #ccc;
					color: #666;
				}
				.pay{
					border: solid 1upx #ec652f;
					color: #ec652f;
				}
			}
		}
	}
}
.input-name,
.input-password {
	height: 80upx;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-left: 30upx;
	box-sizing: border-box;
}

.input-name::after {
	content: " ";
	position: absolute;
	left: 30upx;
	bottom: 0;
	right: 0;
	height: 1px;
	/*border-top: 1px solid #e5e5e5;*/
	transform-origin: 0 0;
	transform: scaleY(.5);
}

.input-name view,
.input-password view {
	width: 120upx;
	height: 50upx;
	line-height: 50upx;
	font-size: 28upx;
	color: #333333;
}

.input-name input,
.input-password input {
	flex: 1;
	height: 50upx;
	line-height: 50upx;
}
</style>
